<template>
    <!-- 图文列表 -->
    <div id="mylist">
       <div class="evaluateTop">
           <div class="evaluateTitle">
               <checklist class="eva-item1" title="" :options="onlys" v-model="radioValues" :max="1" @on-change="changes"></checklist>  
               <div class="eva-item2">好评度90%</div>              
           </div>
            <checker v-model="evaluates" type="radio" default-item-class="check-item" selected-item-class="check-item-selected">
                <checker-item @on-item-click="onItemClick" :value="item" v-for="(item, index) in evaluateType" :key="index">{{item.value}}</checker-item>
            </checker>
       </div>
       <div class="user_eval" v-for="(item, index) in evalDatas"  :key="index">
           <div class="eval_top">
               <div class="eval_head"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2242409787,828489772&fm=58" alt=""></div>
               <div class="eval_name">{{item.user.username}}</div>
               <div class="eval_day">{{item.uptime}}</div>
           </div>
           <div class="eval_content" >
               <div>{{item.comment_text}}</div>
                <div class="eveal_img">
                    <img class="eveal_img_img"  v-for="(imgs, index) in item.evalImg"  :key="index" :src="imgs" alt="">
                    <div class="eveal_type">
                        <p>{{item.evalTypes}}{{item.evalColor}}，{{item.nums}}</p>
                        <!-- <p class="pingjia">购买日期：{{item.buyData}} <span style="padding-left:5%"><img src="static/bottom/tuijian@2x.png" alt="">0</span><span><img src="static/bottom/pingjia@2x.png" alt="">1</span></p> -->
                        
                        <p class="pingjia">购买日期：{{item.buyData}}</p>
                    </div>
                </div>
           </div>
       </div>
    </div>
</template>

<script>

import {Checklist,Checker,CheckerItem} from 'vux'

export default {
  components: {
    Checklist,Checker,CheckerItem 
  },
  props:["evalDatas"],
  data () {
    return {
      type: "1",
      evaluateType:[
          {
                key: '1',
                value: '全部101'
            },{
                key: '2',
                value: '好评100'
            },{
                key: '3',
                value: '中评0'
            },{
                key: '4',
                value: '差评1'
            },
            {
                key: '5',
                value: '有图1'
            }
      ],
      evaluates:{
           key: '1',
           value: '全部'
      },
      onlys:["只看当前商品"],
      radioValues:["只看当前商品"],
      userEvalData:[
          {
              userHead:"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2242409787,828489772&fm=58",
              userName:"鱼**毛",
              buyData:"2018-01-08",
              evalday:"2018-01-10",
              detailEval:"衣服质量一般般，颜色跟图片差别好大，款式还凑合，凑合穿吧",
              evalImg:[
                  "https://img.alicdn.com/bao/uploaded/i3/3045936819/TB1gc4yhTTI8KJjSsphXXcFppXa_!!0-item_pic.jpg_b.jpg",
                  "https://img.alicdn.com/bao/uploaded/i3/3045936819/TB1gc4yhTTI8KJjSsphXXcFppXa_!!0-item_pic.jpg_b.jpg",
                  "https://img.alicdn.com/bao/uploaded/i3/3045936819/TB1gc4yhTTI8KJjSsphXXcFppXa_!!0-item_pic.jpg_b.jpg"
              ],
              evalColor:"白色",
              evalTypes:"(369#)",
              nums:"M"
          }
      ]
   }
  },
  computed: {
  },
  methods:{
      onItemClick(values){
        console.log(values.key);
         this.$vux.loading.show({
        text: 'loading'
      })
      var that = this
      setTimeout(() => {
        this.$vux.loading.hide()
        // that.$data.index = index
        // if (index == 0) {
        //   that.$data.indexs = 0
        // }
        // if (index == 1) {
        //   that.$data.indexs = 1        
        // }
        // if (index == 2) {
        //   that.$data.indexs = 2        
        // }
        // $(".vux-swiper").scrollTop(0)
      }, 500)
      },
      changes(values,old){
          console.log(values,old)
      }
  }
}
</script>
<style lang="less">
 .check-item {
  border: 1px solid #ececec;
  padding: 0px 10px;
  margin: 10px;
  margin-top: 10px;
  border-radius: 10px;
  height: 20px;
  width: 50px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}
.check-item-selected {
  border: 1px solid #E60012;
}
.evaluateTop{

    border-top: 1px solid #ebebeb;
    background: #ffffff;
    margin-bottom: 10px
}
.evaluateTitle{
    display: flex;
        // font-size: 0.75rem;
    border-bottom: 1px solid #ebebeb
}
.eva-item1{
    flex: 2
}
.eva-item2{
   flex: 1;
   text-align: center;
   line-height: 40px

}
.user_eval{
    background: #ffffff;
    padding: 10px;
    font-size: 12px
    // height: 200px;
    
}
.eval_top{
    display: flex
}
.eval_head{
width: 60px
}
.eval_head img{
    width: 40px;
    height: 40px;
    border-radius: 50%
}
.eval_name{
flex: 1
}
.eval_day{
width: 100px
}
.eval_content{
    padding-left: 60px
}
.eveal_type{
    color: #cccccc
}
.eveal_img_img{
width: 90px;
height: 90px;
margin-right: 5px
}
.pingjia img{
   width: 20px;
   height: 20px; 
   margin-right: 3px;
}
.pingjia span{
    text-align: left;
    padding-right:10px
}

</style>
